<!-- 搜索框 -->
<template>
  <div class="search-input-container">
    <el-input v-model.trim="searchValue" :placeholder="placeholder" :prefix-icon="prefixIcon"
      :suffix-icon="searchValue ? 'el-icon-circle-close' : suffixIcon" :disabled="disabled" :maxlength="maxlength"
      @input="handleInput" @clear="handleClear" @keydown.enter.prevent="handleSearch" class="search-input"></el-input>
    <el-button v-if="showSearchBtn" type="primary" @click="handleSearch" class="search-btn">
      {{ searchBtnText }}
    </el-button>
  </div>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits, computed } from 'vue'

// 组件 props
const props = defineProps({
  // 绑定值（双向绑定）
  modelValue: {
    type: String,
    default: ''
  },
  // 占位提示文字
  placeholder: {
    type: String,
    default: '请输入搜索内容'
  },
  // 前缀图标（Element Plus 图标名）
  prefixIcon: {
    type: String,
    default: 'el-icon-search'
  },
  // 后缀图标（Element Plus 图标名）
  suffixIcon: {
    type: String,
    default: ''
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 最大输入长度
  maxlength: {
    type: Number,
    default: 50
  },
  // 是否显示搜索按钮
  showSearchBtn: {
    type: Boolean,
    default: false
  },
  // 搜索按钮文本
  searchBtnText: {
    type: String,
    default: '搜索'
  },
  // 输入防抖时间（毫秒）
  debounceTime: {
    type: Number,
    default: 500
  }
})

// 组件事件
const emit = defineEmits(['search', 'clear', 'input', 'update:modelValue'])

// 内部搜索值（用于防抖处理）
const searchValue = ref(props.modelValue)

// 监听外部绑定值变化，同步到内部
watch(
  () => props.modelValue,
  (val) => {
    searchValue.value = val
  },
  { immediate: true }
)

// 监听内部搜索值变化，触发 input 事件（双向绑定）
watch(
  () => searchValue.value,
  (val) => {
    emit('update:modelValue', val)
    emit('input', val)
  }
)

// 防抖处理后的搜索函数
const debouncedSearch = computed(() => {
  let timer = null
  return (val) => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      emit('search', val)
    }, props.debounceTime)
  }
})

// 输入事件处理（触发防抖搜索）
const handleInput = (val) => {
  debouncedSearch.value(val)
}

// 搜索按钮/回车触发搜索（立即执行，不防抖）
const handleSearch = () => {
  emit('search', searchValue.value)
}

// 清除输入内容
const handleClear = () => {
  searchValue.value = ''
  emit('clear')
  // 清除后触发一次空值搜索
  emit('search', '')
}
</script>

<style scoped lang="scss">
.search-input-container {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;

  .search-input {
    flex: 1;
  }

  .search-btn {
    white-space: nowrap;
  }

  // 适配不同场景的宽度调整
  &.search-input-sm {
    .search-input {
      --el-input-height: 32px;
    }

    .search-btn {
      --el-button-size: small;
    }
  }

  &.search-input-lg {
    .search-input {
      --el-input-height: 40px;
    }

    .search-btn {
      --el-button-size: large;
    }
  }
}
</style>